@import "variables";
@import "mixin";

/* 栅格数量 */
$flex-count: 12;
$column-count: 24;
/* 间隔 */
$interval: 10px;

.row {
  display: block;
  zoom: 1;
}

.row [class*="col"] {
  float: left;
}

@mixin spanGutter ($gutter, $interval, $tag: row) {
  &[data-gutter=#{$gutter}],
  & > .#{$tag}[data-gutter=#{$gutter}] {
    > [class*="col"]:not(:first-child):not(:last-child):not(.#{$tag}) {
      padding-left: $interval / 2;
      padding-right: $interval / 2;
    }
    > [class*="col"]:first-child:not(.#{$tag}) {
      padding-right: $interval / 2;
    }
    > [class*="col"]:last-child:not(.#{$tag}) {
      padding-left: $interval / 2;
    }
  }
}

.row {
  > .row[class*="col"] {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;

    &:not([data-gutter]) {
      > [class*="col"]:not(.row) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  @include spanGutter("sm", $interval - 6px);
  @include spanGutter("md", $interval);
  @include spanGutter("lg", $interval + 6px);
}

.flex {
  > .flex[class*="col"] {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;

    &:not([data-gutter]) {
      > [class*="col"]:not(.flex) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  @include spanGutter("sm", $interval - 6px, flex);
  @include spanGutter("md", $interval, flex);
  @include spanGutter("lg", $interval + 6px, flex);
}


.flex {
  @include flexBox;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-row {
  @include flexRow;
}

.flex-column {
  @include flexColumn;
}

.flex-row-center {
  @include flexRow(center, center);
}

.flex-column-center {
  @include flexColumn(center, center);
}

.justify-between {
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.flex [class*="flex"] {
  // @include flex-column(24);
}

.flex {
  @include flex-column($flex-count);
}

.row {
  @include span($column-count);
}

// xs
/*@media screen and (min-width: $xs) and (max-width: $sm - 1px) {
  .row, .flex {
    @include span($column-count, "xs");
  }
}

// sm
@media screen and (min-width: $sm) and (max-width: $md - 1px) {
  .row, .flex {
    @include span($column-count, "sm");
  }
}

// md
@media screen and (min-width: $md) and (max-width: $lg - 1px) {
  .row, .flex {
    @include span($column-count, "md");
  }
}

// lg
@media (min-width: $lg) {
  .row, .flex {
    @include span($column-count, "lg");
  }
}*/
